<template>
  <div>
<!--    <header class="header">-->
<!--      <el-button type="primary" icon="el-icon-search" @click="add">搜索</el-button>-->
<!--    </header>-->
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
      >
        <el-table-column
          show-overflow-tooltip
          prop="id"
          label="ID"
          width="50">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="名称"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="返利"
          width="100">
          <template slot-scope="scope">
            {{scope.row.fanli*100}}%
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="number"
          label="升级条件（邀请人数）"
          width="">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="beizhu"
          label="备注"
          width="">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60,]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑" :visible.sync="outerVisible" :before-close="handleClosediaLoding">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="ID：" prop="id">
          {{ruleForm.id}}
        </el-form-item>
        <el-form-item label="等级名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="返利：" prop="fanli">
          <el-input v-model="ruleForm.fanli" style="margin-right: 10px"></el-input>
        </el-form-item>
        <el-form-item label="升级条件：" prop="number">
          <el-input v-model="ruleForm.number" style="margin-right: 10px"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="beizhu">
          <el-input type="textarea" v-model="ruleForm.beizhu"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {grade_list,grade_up} from '@/utils/api.js'
export default {
  name: "members",
  data(){
    return{
      loading:false,
      tableData:[],
      token:sessionStorage.getItem("token"),
      currentPage: 1,
      total:0,
      limit:10,
      outerVisible:false,
      ruleForm:{

      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'change' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getList(page,limit){
      this.loading = true
      grade_list(this.token,page,limit).then(res=>{
        if(res.data.status){
          this.tableData = res.data.data.data
          this.total = res.data.data.count
          console.log(this.tableData)
          let timer = setTimeout(()=>{
            this.loading = false
            clearTimeout(timer)
          },400)
        }
      })
    },
    set(){
      grade_up(this.token,this.ruleForm.id,this.ruleForm.name,this.ruleForm.number,this.ruleForm.fanli,this.ruleForm.beizhu).then(res=>{
        if(res.data.status){
          this.handleClosediaLoding()
          this.getList(this.currentPage,this.limit)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.set()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    handleEdit(index,row){
      this.ruleForm = JSON.parse(JSON.stringify(row))
      this.rules = {}
      for (let key in this.ruleForm){
        if(key!='beizhu'){
          this.rules[key]=[{required: true, message: '不能为空', trigger: 'change' }]
        }
      }
      this.outerVisible = true
    },
    handleClosediaLoding(){
      this.rules = {}
      this.ruleForm = {}
      this.outerVisible = false
    },
    handleSizeChange(val) {
      this.limit = val
      console.log(`每页 ${val} 条`);
      this.getList(this.currentPage,this.limit)
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList(this.currentPage,this.limit)
    },
    add() {

    },
  },
  created() {
    this.getList(this.currentPage,this.limit)
  }
}
</script>

<style scoped>
/deep/.header{
  background: white!important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
}
.demo-ruleForm{
  width: 50%;
}
/deep/.el-form-item .el-form-item__content{
  display: flex;
}

/deep/.el-table th.el-table__cell>.cell{
  text-align: center;
}
/deep/.el-table .cell.el-tooltip{
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell{
  text-align: center;
}
</style>
